<template>
  <div id="addressFront">
    <el-container>
      <el-header>
      </el-header>
      <el-main>
        <el-table
            :data="addressData"
            style="width: 100%">
          <el-table-column
              label="序号"
              width="180">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>

          </el-table-column>
          <el-table-column
              prop="receiver"
              label="收货人"
              width="180">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="手机号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="region"
              label="区域"
              width="180">
          </el-table-column>
          <el-table-column
              prop="address"
              label="详细地址"
              width="180">
          </el-table-column>
          <el-table-column
              label="操作"
              width="120px">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改 " placement="top-start">
                <el-button type="primary"  icon="el-icon-edit" circle @click="doUpdate(scope.row)" ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="7">
            <el-pagination
                background
                :page-sizes="[3, 5, 10]"
                :page-size="pageSize"
                layout="sizes,prev, pager, next"
                :total="total"
                :page-count="pageCount"
                :current-page="pageNo"
                @prev-click="prevPage"
                @next-click="nextPage"
                @current-change="pageChange"
                @size-change="pageSizeChange"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>


    <el-dialog title="修改地址" :visible.sync="changeAddress">
      <el-form >
        <el-form-item label="收货人:" >
          <el-input v-model="myAddress.receiver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" >
          <el-input v-model="myAddress.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域:" >
          <el-input v-model="myAddress.region" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="myAddress.address" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" >
        <el-button @click="changeAddress = false">取 消</el-button>
        <el-button type="primary" @click="updateAddress">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      pageSize:3,
      total:0,
      pageNo:1,
      pageCount:1,


      dataParam:{
        account:'',
        address:''
      },
      addressData:[],
      changeAddress:false,
      myAddress:{account:'',region:'',address:'',orderID:'',phone:'',receiver:''},

    }
  },
  methods: {
    nextPage(val) { //下一页
      this.pageNo = val;
      this.queryAddress();
    },
    prevPage(val) { //上一页
      this.pageNo = val;
      this.queryAddress();
    },
    pageChange(val) {
      this.pageNo = val;
      this.queryAddress();
    },
    pageSizeChange(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.queryAddress();
    },
    updateAddress() {
      let jwt = localStorage.getItem("jwt");
      // console.log(jwt);
      console.log("++++++++++++++++++");
      console.log(this.myAddress);
      this.$axios.post('api/address/updateAllAddress',this.myAddress,{headers:{"jwt":jwt}})
          .then(response =>{
            if(response.data.code==200){
              this.$message('修改成功');
            } else {
              this.$message('修改失败');
            }
            this.queryAddress();
            this.changeAddress=false;
          })
    },

    doUpdate(row) {
      this.changeAddress =true;
      this.myAddress.region = row.region;
      this.myAddress.address = row.address;
      this.myAddress.account = row.account;
      this.myAddress.orderID = row.orderID;
      this.myAddress.receiver = row.receiver;
      this.myAddress.phone = row.phone;
      // console.log("++++++++++++++++++");
      // console.log(this.myAddress.receiver);
    },
    queryAddress() {
      let jwt = localStorage.getItem("jwt");
      let newAccount = sessionStorage.getItem("account");
      let pageParam = {}
      pageParam.pageNo = this.pageNo;
      pageParam.pageSize = this.pageSize;
      this.dataParam.account=newAccount
      pageParam.data = this.dataParam;

      this.$axios.post('api/address/queryAddressByAccount', pageParam,
          {headers: {"jwt": jwt}})
          .then(res => {
            console.log("+++++++++++++++++++++++++++")
            console.log(res.data.data.list);

            if (res.data.code == 200) {
              let resdate = res.data.data;

              this.addressData = resdate.list;
              this.pageNo = resdate.pageNum;
              this.pageSize = resdate.pageSize;
              this.total = resdate.total;
              this.pageCount = resdate.pages;
            }
          })
    },
  },
  created(){
    this.queryAddress();
  }

}

</script>

<style scoped>
</style>
